<!-- 康复救助机构管理 -->
<template>
  <el-card>
    <el-row>
      <el-form ref="form" :model="searchDto" inline label-width="auto" label-suffix=":">
        <el-form-item label="关键字" prop="keywords">
          <el-input
            v-model="searchDto.keywords"
            placeholder="请输入救机构名称"
            style="width:250px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-s-open" type="primary" @click="clear">重置</el-button>
        </el-form-item>
        <!-- <el-form-item>
          <el-button icon="el-icon-plus" type="primary" @click="addInstitute">新增康复机构</el-button>
        </el-form-item> -->
      </el-form>
    </el-row>
    <page-table
      ref="recovery"
      :page-data="pageData"
      :loading="loading"
      :do-get-page-data="getPageData"
    >
      <el-table-column type="index" label="编号" width="80" align="center" />
      <el-table-column prop="name" label="机构名称" align="center" show-overflow-tooltip />
      <el-table-column prop="address" label="机构地址" align="center" show-overflow-tooltip />
      <el-table-column prop="linkman" label="联系人" align="center" />
      <el-table-column prop="phone" label="联系方式" align="center" />
      <el-table-column prop="createTime" label="创建时间" align="center" />
      <el-table-column prop="recoveryType" label="救助类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.recoveryType | keyText("kfjgjzlx") }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <!-- <el-tooltip content="编辑" placement="top">
            <el-button
              size="mini"
              icon="el-icon-edit"
              @click="editInstitute(scope.row)"
            ></el-button>
          </el-tooltip> -->
          <el-tooltip content="详情" placement="top">
            <el-button
              type="button"
              size="mini"
              icon="el-icon-view"
              @click="viewInstitute(scope.row)"
            >
            </el-button>
          </el-tooltip>
          <!-- <el-tooltip content="删除" placement="top">
            <el-button
              size="mini"
              icon="el-icon-delete"
              @click="delInstitute(scope.row)"
            ></el-button>
          </el-tooltip> -->
        </template>
      </el-table-column>
    </page-table>
    <el-dialog
      :visible.sync="addInstituteStatus"
      title="新增/编辑康复机构:"
      width="40%"
      @close="fail"
    >
      <el-row>
        <el-col :span="24" class="mt20">
          <el-form
            ref="form1"
            :rules="rules"
            :model="formInfo"
            label-width="auto"
            label-suffix=":"
            style="padding-right: 20px"
          >
            <el-form-item label="名称" prop="name">
              <el-input placeholder="请输入名称" v-model="formInfo.name" />
            </el-form-item>
            <el-form-item label="地址" prop="address">
              <el-input placeholder="请输入地址" v-model="formInfo.address" />
            </el-form-item>
            <el-form-item label="联系人" prop="linkman">
              <el-input placeholder="请输入联系人" v-model="formInfo.linkman" />
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input placeholder="请输入联系电话" v-model="formInfo.phone" />
            </el-form-item>
            <el-form-item label="救助类型" prop="recoveryType">
              <el-select v-model="formInfo.recoveryType" placeholder="请选择救助类型">
                <el-option
                  v-for="item in getDictionary('kfjgjzlx')"
                  :key="item.keyword"
                  :label="item.label"
                  :value="item.keyword"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="视频监控url" prop="videoUrl">
              <el-input placeholder="请输入视频监控url" v-model="formInfo.videoUrl" />
            </el-form-item>
            <!-- <el-form-item label="回放url" prop="playbackUrl">
              <el-input placeholder="请输入回放url" v-model="formInfo.playbackUrl" />
            </el-form-item> -->
            <el-form-item label="考勤机设备sn码" prop="deviceSn">
              <el-input placeholder="请输入考勤机设备sn码" v-model="formInfo.deviceSn" />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div slot="footer">
        <el-button type="primary" @click="saveInstitute">确认</el-button>
        <el-button @click="fail">取消</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>
<script>
export default {
  name: 'RecoveryOrgManage',
  data() {
    return {
      pageData: {},
      loading: false,
      searchDto: {
        keywords: null,
      },
      addInstituteStatus: false,
      rules: {
        name: [{ required: true, message: "请输入机构名称", trigger: "blur" }],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        linkman: [{ required: true, message: "请输入联系人", trigger: "blur" }],
        phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
        recoveryType: [{ required: true, message: "请选择救助类型", trigger: "change" }],
      },
      formInfo: {},
    }
  },
  methods: {
    // 获取分页数据
    getPageData(val) {
      let tem = Object.assign(this.searchDto, val);

      this.API.getRecoveryInstitutePageList(tem).then(ret => {
        this.pageData = ret.data;
      });
    },
    // 查询
    search() {
      this.getPageData();
    },
    //清空
    clear() {
      this.$refs.form.resetFields()
      this.getPageData();
    },
    editInstitute(row) {
      this.API.getRecoveryInstituteById({ id: row.id }).then(ret => {
        this.formInfo = ret.data;
        this.addInstituteStatus = true;
      });
    },
    viewInstitute({ id }) {
      this.$router.push({ name: 'orgDetail', query: { id } })
    },
    delInstitute({ id }) {
      this.$confirm("确认删除当前机构?", "提示", {}).then(() => {
        this.API.deleteRecoveryInstituteById({ id }).then(() => {
          this.success('删除成功');
          this.getPageData();
        });
      }).catch(err => this.warning(err));
    },
    fail() {
      this.addInstituteStatus = false;
      this.$refs.form1.resetFields()
    },
    // 新增机构
    addInstitute() {
      this.addInstituteStatus = true;
    },
    saveInstitute() {
      this.$refs["form1"].validate(valid => {
        if (valid) {
          let tem = { body: this.formInfo };
          this.API.addOrUpdateRecoveryInstitute(tem).then(() => {
            this.success('操作成功');
            this.getPageData();
            this.fail();
          });
        }
      });
    }
  },
  mounted() {
    this.getPageData();
  },
}
</script>
<style scoped lang="scss"></style>
